<template>
  <div class="add-price">
    <div class="header">
      <div class="left"></div>
      <div class="right">新增询价</div>
    </div>

    <div class="content">
      <el-card>
        <PriceForm ref="PriceForm"></PriceForm>
        <div class="btn-area">
          <!-- <el-button class="btn-color-one" @click="addLine()"
            >添加一行</el-button
          > -->

          <i class="el-icon-delete right-delete" @click="del()"></i>

          <!-- <el-button class="right-delete" type="danger" @click="del()"
            >删除</el-button
          > -->
          <el-button class="btn-color-one" @click="save()">保存</el-button>
          <el-button class="btn-color-one" @click="add()">去询价</el-button>
          <!-- <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :show-file-list="false"
            list-type="picture"
            style="margin-left: 10px"
          >
            <el-button class="btn-color-one">导入询价列表</el-button>
          </el-upload> -->
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :show-file-list="false"
            style="margin-left: 10px"
            list-type="picture"
          >
            <el-button class="btn-color-one">上传BOM</el-button>
          </el-upload>
          <!-- <el-button class="btn-color-one" @click="importList()"
            >导入询价列表</el-button
          >
          <el-button class="btn-color-one" @click="importBOM()"
            >导入BOM</el-button
          > -->

          <!-- <el-link type="primary" style="margin-left: 15px"
            >询价列表模板</el-link
          > -->
          <el-link type="primary" style="margin-left: 15px"
            >下载BOM模板</el-link
          >
        </div>
        <el-form :model="form" ref="form" :rules="rules">
          <el-table
            :data="form.tableData"
            row-key="id"
            ref="table"
            style="width: 100%"
            @selection-change="handleSelect"
          >
            <el-table-column label="" width="50" header-align="center">
              <template slot-scope="scope">
                <el-form-item>
                  <i
                    class="el-icon-remove-outline"
                    @click="handleClick(scope.row)"
                  ></i>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column width="140" align="center">
              <template slot="header">
                <span class="color-red">*</span>
                <span>品牌</span>
              </template>
              <template slot-scope="scope">
                <el-form-item
                  :prop="`tableData[${scope.$index}].brand`"
                  :rules="rules.brand"
                >
                  <el-input v-model="scope.row.brand" size="mini"></el-input>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column width="140" align="center">
              <template slot="header">
                <span class="color-red">*</span>
                <span>型号</span>
              </template>
              <template slot-scope="scope">
                <el-form-item
                  :prop="`tableData[${scope.$index}].model`"
                  :rules="rules.model"
                >
                  <el-input v-model="scope.row.model" size="mini"></el-input>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column width="140" align="center">
              <template slot="header">
                <span class="color-red">*</span>
                <span>数量</span>
              </template>
              <template slot-scope="scope">
                <el-form-item
                  :prop="`tableData[${scope.$index}].count`"
                  :rules="rules.count"
                >
                  <el-input v-model="scope.row.count" size="mini"></el-input>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column label="批次" width="140" header-align="center">
              <template slot-scope="scope">
                <el-form-item :prop="`tableData[${scope.$index}].batch`">
                  <el-input v-model="scope.row.batch" size="mini"></el-input>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column label="封装" width="140" header-align="center">
              <template slot-scope="scope">
                <el-form-item
                  :prop="`tableData[${scope.$index}].encapsulation`"
                >
                  <el-input
                    v-model="scope.row.encapsulation"
                    size="mini"
                  ></el-input>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column label="接受价" width="140" header-align="center">
              <template slot-scope="scope">
                <el-form-item :prop="`tableData[${scope.$index}].price`">
                  <el-input v-model="scope.row.price" size="mini"></el-input>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column width="140" align="center">
              <template slot="header">
                <span class="color-red">*</span>
                <span>交货期</span>
              </template>
              <template slot-scope="scope">
                <el-form-item
                  :prop="`tableData[${scope.$index}].deliveryDate`"
                  :rules="rules.deliveryDate"
                >
                  <el-date-picker
                    style="width: 130px"
                    v-model="scope.row.deliveryDate"
                    type="date"
                    size="mini"
                    placeholder="选择日期"
                  >
                  </el-date-picker>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column label="MPQ" width="140" header-align="center">
              <template slot-scope="scope">
                <el-form-item :prop="`tableData[${scope.$index}].MPQ`">
                  <el-input v-model="scope.row.MPQ" size="mini"></el-input>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column label="包装" width="140" header-align="center">
              <template slot-scope="scope">
                <el-form-item :prop="`tableData[${scope.$index}].packing`">
                  <el-input v-model="scope.row.packing" size="mini"></el-input>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column label="备注" width="120" header-align="center">
              <template slot-scope="scope">
                <el-form-item :prop="`tableData[${scope.$index}].remark`">
                  <el-input v-model="scope.row.remark" size="mini"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>
        </el-form>

        <i
          style="margin-left: 10px; margin-top: 10px; font-size: 14px"
          class="el-icon-circle-plus-outline"
          @click="addLine()"
        ></i>
      </el-card>
    </div>
  </div>
</template>

<script>
import PriceForm from "./components/PriceForm.vue";
import { v4 as uuidv4 } from "uuid";
import _ from "lodash";
export default {
  components: {
    PriceForm,
  },
  data() {
    return {
      selectList: [],
      orginData: {
        id: "",
        brand: "", //品牌
        model: "", //型号
        count: "", //数量
        MPQ: "", //MPQ
        batch: "", //批次
        encapsulation: "", //封装
        price: "", //接受价
        deliveryDate: "", //交货期
        packing: "", //包装
        remark: "", //备注
      },
      form: {
        tableData: [
          {
            id: uuidv4(),
            brand: "", //品牌
            model: "", //型号
            count: "", //数量
            MPQ: "", //MPQ
            batch: "", //批次
            encapsulation: "", //封装
            price: "", //接受价
            deliveryDate: "", //交货期
            packing: "", //包装
            remark: "", //备注
          },
        ],
      },
      rules: {
        brand: [{ required: true, message: "请填写品牌", trigger: "blur" }],
        model: [{ required: true, message: "请填写型号", trigger: "blur" }],
        count: [{ required: true, message: "请填写数量", trigger: "blur" }],
        deliveryDate: [
          { required: true, message: "请选择交货日期", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    handleClick(row) {
      console.log(row);
      this.form.tableData = this.form.tableData.filter(
        (item) => item.id != row.id
      );
    },
    save() {
      // this.$refs.PriceForm.submitForm("ruleForm");
      this.$refs["form"].validate((valid) => {
        if (valid) {
          console.log(2111);
        } else {
          console.log(1111);
        }
      });
    },
    handlePreview(file) {
      console.log(file);
    },
    addLine() {
      let data = _.cloneDeep(this.orginData);
      data.id = uuidv4();
      this.form.tableData.push(data);
      // this.$set(this.form.tableData,this.form.tableData.length-1,this.orginData)
      console.log(this.form.tableData);
    },
    handleSelect(selection) {
      this.selectList = selection.map((item) => item.id);
      console.log(this.selectList, "selectList===============");
    },
    test(row) {
      console.log(row);
      this.form.tableData = this.form.tableData.filter(
        (item) => item.id != row.id
      );
    },
    del() {
      this.form.tableData = this.form.tableData.filter(
        (item) => !this.selectList.includes(item.id)
      );
      this.$refs.table.clearSelection();
    },
  },
  created() {
    console.log(this.form.tableData);
  },
};
</script>
<style lang="scss" scoped>
.add-price {
  .header {
    display: flex;
    margin-bottom: 20px;
    .left {
      background-color: #442a8d;
      width: 5px;
      height: 20px;
      margin-right: 5px;
    }
    .right {
      font-weight: 650;
      color: #666666;
      font-size: 16px;
    }
  }

  .content {
    height: calc(100vh - 160px);
    .el-card {
      height: 100%;
    }

    .btn-area {
      display: flex;
      position: relative;
      .btn-color-one {
        background-color: #442a8d;
        color: #ffffff;
      }
      .btn-color-two {
        background-color: rgba(62, 151, 149, 1);
        color: #ffffff;
      }

      .right-delete {
        position: absolute;
        right: 10px;
        top: 0px;
        font-size: 18px;
      }
    }
  }
}
.color-red {
  color: red;
}
</style>
